<template>
  <div class="box_context">
    <div class="user_box">
      <div class="search_box">
        <a-input
          v-model:value="value"
          placeholder="请输入内容......."
          :bordered="false"
          class="serach_input"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>
        <a-button type="primary" shape="circle" @click="showApplyDrawer">
          <template #icon>
            <div style="position: relative">
              <TeamOutlined />
              <div class="circle" v-if="cont">
                <ClientOnly>
                  {{ cont }}
                </ClientOnly>
              </div>
            </div>
          </template>
        </a-button>
        <a-button type="primary" shape="circle" @click="showDrawer">
          <template #icon><UserAddOutlined /> </template>
        </a-button>
      </div>
      <div class="user_list">
        <VBSmooth>
          <ClientOnly>
            <UserListItem
              :face-img="item.headPhoto"
              :title="item.cetName"
              v-for="item in userList"
              :key="item.id"
              :is-active="item.id == selectUser?.id"
              @click="userClick(item)"
            ></UserListItem>
          </ClientOnly>
        </VBSmooth>
      </div>
    </div>
    <div class="box_right" v-if="selectUser">
      <div class="center_box">
        <div class="context">
          <div class="top">
            <a-avatar shape="square" :size="64">
              <template #icon> <img :src="selectUser.headPhoto" /></template>
            </a-avatar>
            <div class="cetBox">
              <div class="cetName">姓名： {{ selectUser.cetName }}</div>
              <div class="sub_title">
                用户名：{{ selectUser.userName ?? "暂无" }}
              </div>
              <div class="sub_title">
                手机号码：{{ selectUser.mobile ?? "暂无" }}
              </div>
            </div>
          </div>
          <a-divider />
          <div class="sub_title">
            电子邮箱：{{ selectUser.eMail ?? "暂无" }}
          </div>
        </div>
        <div class="box_button">
          <a-button type="primary" @click="sendMessage">发送消息</a-button>
        </div>
      </div>
    </div>
    <div class="box_right" v-else>暂无数据</div>

    <a-drawer
      v-model:visible="visible"
      title="添加好友"
      placement="right"
      class="drawer_style"
      :width="450"
      :get-container="false"
    >
      <div class="drawer_context">
        <a-input
          v-model:value="searchValue"
          placeholder="请输入邮箱......."
          :bordered="false"
          class="serach_input"
          @change="drawerSearchChange"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>
        <div class="user_list">
          <UserListItem
            :face-img="item.headPhoto"
            :title="item.cetName"
            v-for="item in addSearchUserList"
            :key="item.id"
          >
            <template #suffix>
              <a-button type="primary" @click="addUserClick(item.id)">
                添加
              </a-button>
            </template>
          </UserListItem>
        </div>
      </div>
    </a-drawer>

    <a-drawer
      v-model:visible="apply"
      title="好友申请"
      placement="right"
      class="drawer_style"
      :width="450"
      :get-container="false"
    >
      <div class="drawer_context">
        <div class="user_list">
          <UserListItem
            :face-img="item.headPhoto"
            :title="item.cetName"
            v-for="item in addUserApproveList"
            :key="item.id"
          >
            <template #suffix>
              <div class="suffixApprove" v-if="item.state == 0">
                <a-button type="link" @click="approveClick(item.id, 1)">
                  同意
                </a-button>
                <a-button type="text" danger @click="approveClick(item.id, 2)">
                  拒绝
                </a-button>
              </div>
              <div class="suffixApprove succese" v-else-if="item.state == 1">
                已同意
              </div>
              <div class="suffixApprove error" v-else-if="item.state == 2">
                已拒绝
              </div>
            </template>
          </UserListItem>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script lang="ts" setup>
import {
  SearchOutlined,
  TeamOutlined,
  UserAddOutlined,
} from "@ant-design/icons-vue/lib/icons";
import { message } from "ant-design-vue";
import VBSmooth from "vb-smooth";
import { useAddUserApprove } from "~~/store/addUserApproveList.store";
import { useFriendList } from "~~/store/friendList.store";
import { useUserInfo } from "~~/store/userInfo.store";
import { useUserMessageList } from "~~/store/userMessage.store";
import { addUserApproveInterface, UserInterface } from "~~/types";
import { useMyFetch } from "~~/utils/useMyFetch";

useHead({
  title: "用户列表",
});

let value = ref<string>("");
let userId = useCookie("userId");
let cont = computed(
  () =>
    useAddUserApprove().getAddUserApproveList.filter((item) => !item.state)
      .length
);
let searchValue = ref<string>("");
const visible = ref<boolean>(false);
const apply = ref<boolean>(false);
let friend = useFriendList();
let addSearchUserList = ref<UserInterface[]>([]);
let addUserApprove = useAddUserApprove();
let addUserApproveList = ref<addUserApproveInterface[]>([]);
const getUserList = async () => {
  const { data } = await useMyFetch<UserInterface[]>(`friend/${userId.value}`, {
    method: "GET",
  });
  if (data) friend.setUserList(data);
};
let userList = computed(() => {
  if (value.value == "") return friend.getUserList;
  return friend.getUserList.filter((item) => {
    if (item.cetName.indexOf(value.value) != -1) return true;
    return false;
  });
});

let selectUser = ref<UserInterface | null>(null);
const showDrawer = () => {
  visible.value = true;
};
const showApplyDrawer = () => {
  apply.value = true;
  addUserApproveList.value = addUserApprove.getAddUserApproveList;
};

const userClick = (user: UserInterface) => {
  selectUser.value = user;
};

const sendMessage = () => {
  const { replace } = useRouter();
  const userMessageStore = useUserMessageList();
  replace("/main/message");
  userMessageStore.setSelectUserId(selectUser.value!.id);
};

// 审批好友
const approveClick = async (id: string, state: number) => {
  const { data } = await useMyFetch<boolean>("/friendApplication/agreeFriend", {
    body: {
      id: id,
      state: state,
    },
    method: "POST",
  });
  if (!data) return;
  let result = addUserApproveList.value.map((item) => {
    if (item.id == id) item.state = state;
    return item;
  });
  addUserApprove.setAddUserApproveList(result);
  message.success("操作成功");
};

//搜索好友
const drawerSearchChange = async () => {
  if (!searchValue.value) return (addSearchUserList.value = []);
  const { data } = await useMyFetch<UserInterface[]>("user", {
    body: {
      search: searchValue.value,
    },
    method: "POST",
  });
  if (!data) return;
  addSearchUserList.value = data.filter((item) => {
    if (item.id != userId.value) return item;
  });
};

//添加好友
const addUserClick = async (addUserId: string) => {
  const { data } = await useMyFetch<boolean>("friendApplication/addFriend", {
    body: {
      userId: useUserInfo().getUserInfo?.id,
      addFriendUserId: addUserId,
      state: 0,
    },
    method: "POST",
  });
  if (data) message.success("已发送添加好友申请");
};
getUserList();
</script>

<style scoped lang="scss">
.box_context {
  width: 100%;
  height: 100%;
  display: flex;

  .user_box {
    width: 350px;
    background: #402e58;
    display: flex;
    flex-direction: column;

    .search_box {
      height: 80px;
      padding: 20px;
      display: flex;
      border-bottom: 1px solid #35244e;
      .serach_input {
        background-color: #35244e;
        border: none;
        border-radius: 15px;
        height: 30px;
        font-size: 14px;
        color: #71608a;

        :deep(input) {
          color: #71608a;
        }

        ::-webkit-input-placeholder {
          color: #71608a;
          font-size: 12px;
        }
      }

      .ant-input-affix-wrapper:focus {
        border: none;
        box-shadow: none;
        outline: 0;
      }
      > .ant-btn {
        background-color: #36254f;
        border: none;
        color: #71608a;
        margin-left: 10px;
      }
    }

    .user_list {
      flex: 1;
      position: relative;

      :deep(#smooth-layer) {
        position: absolute !important;
      }
      :deep(.scrollbar-track) {
        background-color: #695681;
      }
    }
  }
  .box_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .center_box {
      width: 400px;
      height: 240px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .context {
        .top {
          display: flex;
          .cetBox {
            margin-left: 20px;
            .cetName {
              font-size: 14px;
            }
          }
        }
        .sub_title {
          color: #9e9e9e;
        }
      }
      .box_button {
        text-align: center;
        margin: 30px 0;
      }
    }
  }

  :deep(.drawer_style) {
    > .ant-drawer-content-wrapper {
      .ant-drawer-content {
        background: #402e58;
        .ant-drawer-body {
          padding: 0px;
        }
        .ant-drawer-header {
          background-color: transparent;

          .ant-drawer-title {
            color: #fff;
          }
          .ant-drawer-close {
            color: #fff;
          }
        }
      }
    }
  }

  .drawer_context {
    display: flex;
    flex-direction: column;
    height: 100%;

    .serach_input {
      background-color: #35244e;
      border: none;
      border-radius: 15px;
      height: 30px;
      font-size: 14px;
      color: #71608a !important;
      margin: 25px;
      width: calc(100% - 50px);

      :deep(input) {
        color: #71608a !important;
      }

      ::-webkit-input-placeholder {
        color: #71608a;
        font-size: 12px;
      }
    }
    .user_list {
      flex: 1;
    }
  }
  .suffixApprove {
    display: flex;
    font-size: 14px;
    justify-content: center;
  }

  .succese {
    color: #84e92c;
  }
  .error {
    color: #ff4d4f;
  }

  .circle {
    position: absolute;
    background: #ff4d4f;
    height: 16px;
    min-width: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    right: -5px;
    bottom: -5px;
    color: #fff;
  }
}
</style>
